<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多样化社交动态列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .container {
            max-width: 800px;
        }
        
        .feed-section {
            margin-bottom: 3rem;
        }
        
        .style-label {
            background-color: #f1f5f9;
            padding: 1rem;
            font-weight: 600;
            color: #334155;
            border-radius: 8px 8px 0 0;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 通用动态卡片样式 */
        .post-card {
            background-color: white;
            border-radius: 0 0 8px 8px;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .post-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        /* 内容类型标签 */
        .post-type {
            display: inline-block;
            padding: 0.2rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 4px;
            margin-right: 0.5rem;
        }
        
        .type-article { background-color: #dbeafe; color: #1e40af; }
        .type-post { background-color: #dbeafe; color: #1e40af; }
        .type-event { background-color: #dcfce7; color: #166534; }
        .type-date { background-color: #fee2e2; color: #991b1b; }
        .type-poll { background-color: #fef3c7; color: #92400e; }
        .type-topic { background-color: #e0e7ff; color: #4338ca; }
        .type-horoscope { background-color: #fce7f3; color: #9d174d; }
        .type-product { background-color: #d1fae5; color: #059669; }
        .type-service { background-color: #e0f2fe; color: #0369a1; }
        .type-album { background-color: #ede9fe; color: #5b21b6; }
        .type-repost { background-color: #f1f5f9; color: #334155; }
        
        /* 作者信息 */
        .post-author {
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            font-weight: 600;
            font-size: 1rem;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            color: #1e293b;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        .author-name:hover {
            color: #2563eb;
        }
        
        .post-meta {
            font-size: 0.875rem;
            color: #94a3b8;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .post-menu {
            color: #94a3b8;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .post-menu:hover {
            color: #1e293b;
        }
        
        /* 约会作者按钮 */
        .date-author-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.875rem;
            color: #2563eb;
            text-decoration: none;
            margin-top: 0.25rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }
        
        .date-author-btn:hover {
            background-color: #eff6ff;
            color: #1d4ed8;
        }
        
        /* 动态内容 */
        .post-content {
            padding: 1rem;
            line-height: 1.6;
        }
        
        /* 转发内容样式 */
        .repost-content {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 1rem;
            margin: 0.5rem 0;
            border: 1px solid #e2e8f0;
        }
        
        .repost-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
            color: #64748b;
        }
        
        /* 投票内容样式 */
        .poll-options {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 0.75rem;
        }
        
        .poll-option {
            padding: 0.75rem;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .poll-option:hover {
            border-color: #93c5fd;
            background-color: #eff6ff;
        }
        
        .poll-option.selected {
            border-color: #2563eb;
            background-color: #eff6ff;
        }
        
        .poll-info {
            font-size: 0.875rem;
            color: #64748b;
            margin-top: 0.75rem;
        }
        
        /* 商品和服务样式 */
        .product-info, .service-info {
            display: flex;
            gap: 1rem;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid #f1f5f9;
        }
        
        .product-image, .service-image {
            width: 100px;
            height: 100px;
            background-color: #f1f5f9;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .product-image img, .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-details, .service-details {
            flex: 1;
        }
        
        .product-title, .service-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .product-price {
            color: #dc2626;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .service-provider {
            color: #64748b;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }
        
        .product-actions, .service-actions {
            margin-top: 0.5rem;
        }
        
        /* 活动样式 */
        .event-details {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 0.75rem;
            margin-top: 0.75rem;
            border: 1px solid #e2e8f0;
        }
        
        .event-date, .event-location {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }
        
        .event-actions {
            margin-top: 0.5rem;
            display: flex;
            gap: 0.5rem;
        }
        
        /* 星座样式 */
        .horoscope-details {
            background-color: #fce7f3;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 0.75rem;
        }
        
        .horoscope-date {
            font-size: 0.875rem;
            color: #9d174d;
            margin-bottom: 0.5rem;
        }
        
        .horoscope-mood {
            display: flex;
            gap: 1rem;
            margin: 0.75rem 0;
        }
        
        .mood-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .mood-label {
            font-size: 0.75rem;
            color: #64748b;
        }
        
        .mood-value {
            font-weight: 600;
            color: #9d174d;
        }
        
        /* 图片容器 */
        .post-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
            gap: 0.5rem;
            padding: 0 1rem 1rem;
        }
        
        .post-image {
            aspect-ratio: 1/1;
            background-color: #f1f5f9;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        
        .post-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 单张图片样式 */
        .single-image {
            grid-template-columns: 1fr;
        }
        
        .single-image .post-image {
            aspect-ratio: 16/9;
        }
        
        /* 统计信息 */
        .post-stats {
            padding: 0.75rem 1rem;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
            color: #64748b;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 操作按钮 */
        .action-buttons {
            display: flex;
            justify-content: space-around;
            padding: 0.5rem 0;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: #64748b;
            background: none;
            border: none;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            flex: 1;
        }
        
        .action-btn:hover {
            background-color: #f1f5f9;
            color: #1e293b;
        }
        
        .action-btn.liked {
            color: #ef4444;
        }
        
        .action-btn.bookmarked {
            color: #f59e0b;
        }
        
        /* 深色风格 */
        .style-dark {
            background-color: #0f172a;
        }
        
        .style-dark .post-card {
            background-color: #1e293b;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .style-dark .post-card:hover {
            box-shadow: 0 4px 6px rgba(0,0,0,0.4);
        }
        
        .style-dark .post-author {
            border-bottom: 1px solid #334155;
        }
        
        .style-dark .author-avatar {
            background-color: #334155;
            color: #e2e8f0;
        }
        
        .style-dark .author-name {
            color: #f8fafc;
        }
        
        .style-dark .author-name:hover {
            color: #93c5fd;
        }
        
        .style-dark .post-meta {
            color: #94a3b8;
        }
        
        .style-dark .post-menu {
            color: #94a3b8;
        }
        
        .style-dark .post-menu:hover {
            color: #f8fafc;
        }
        
        .style-dark .post-content {
            color: #e2e8f0;
        }
        
        .style-dark .repost-content {
            background-color: #334155;
            border-color: #475569;
        }
        
        .style-dark .repost-header {
            color: #94a3b8;
        }
        
        .style-dark .poll-option {
            border-color: #475569;
            background-color: #334155;
        }
        
        .style-dark .poll-option:hover,
        .style-dark .poll-option.selected {
            border-color: #60a5fa;
            background-color: #1e3a8a;
        }
        
        .style-dark .poll-info {
            color: #94a3b8;
        }
        
        .style-dark .product-info, 
        .style-dark .service-info {
            border-top-color: #334155;
        }
        
        .style-dark .product-image, 
        .style-dark .service-image {
            background-color: #334155;
        }
        
        .style-dark .product-title, 
        .style-dark .service-title {
            color: #f8fafc;
        }
        
        .style-dark .event-details {
            background-color: #334155;
            border-color: #475569;
        }
        
        .style-dark .date-author-btn {
            color: #93c5fd;
        }
        
        .style-dark .date-author-btn:hover {
            background-color: #334155;
            color: #bfdbfe;
        }
        
        .style-dark .post-image {
            background-color: #334155;
        }
        
        .style-dark .post-stats {
            border-top: 1px solid #334155;
            border-bottom: 1px solid #334155;
            color: #94a3b8;
        }
        
        .style-dark .action-btn {
            color: #94a3b8;
        }
        
        .style-dark .action-btn:hover {
            background-color: #334155;
            color: #f8fafc;
        }
        
        /* 响应式调整 */
        @media (max-width: 576px) {
            .post-images {
                grid-template-columns: 1fr;
            }
            
            .action-btn span {
                display: none;
            }
            
            .action-btn {
                gap: 0;
            }
            
            .post-stats {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .product-info, .service-info {
                flex-direction: column;
            }
            
            .product-image, .service-image {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <!-- 标准风格动态列表 -->
        <div class="feed-section">
            <h3 class="style-label">
                <i class="fas fa-stream"></i> 标准风格 - 多种类型动态
            </h3>
            
            <!-- 转发文章动态 -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">张明</a>
                        <div class="post-meta">
                            <span>2小时前</span>
                            <span>·</span>
                            <span class="post-type type-repost">转发</span>
                            <span class="post-type type-article">文章</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>这篇文章分析得很到位，分享给大家！</p>
                    
                    <div class="repost-content">
                        <div class="repost-header">
                            <i class="fas fa-retweet"></i>
                            <span>来自 科技日报 的文章</span>
                        </div>
                        <h4>人工智能如何改变未来社交模式</h4>
                        <p>随着AI技术的快速发展，社交网络正在经历前所未有的变革。本文将探讨机器学习算法如何重塑我们的社交体验，从内容推荐到虚拟社交等多个维度进行分析...</p>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 342</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 28</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn">
                        <i class="fas fa-thumbs-up"></i>
                        <span>点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 活动动态（多张图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">李婷</a>
                        <div class="post-meta">
                            <span>昨天 18:30</span>
                            <span>·</span>
                            <span class="post-type type-event">活动</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>本周末将举办一场户外摄影活动，欢迎各位摄影爱好者参加，一起交流拍摄技巧，捕捉美好瞬间！</p>
                    
                    <div class="event-details">
                        <div class="event-date">
                            <i class="fas fa-calendar"></i>
                            <span>5月20日 10:00-16:00</span>
                        </div>
                        <div class="event-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>城市中央公园 南门广场</span>
                        </div>
                        <div class="event-actions">
                            <button class="btn btn-sm btn-primary">
                                <i class="fas fa-check"></i> 参加
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-share-alt"></i> 邀请
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="post-images">
                    <div class="post-image">
                        <img src="https://picsum.photos/400/400?random=10" alt="公园风景，适合摄影的地点">
                    </div>
                    <div class="post-image">
                        <img src="https://picsum.photos/400/400?random=11" alt="摄影活动示例照片">
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 567</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 42</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-users"></i>
                        <span>已报名 18</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-thumbs-up"></i>
                        <span>已点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 投票动态（无图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">刘伟</a>
                        <div class="post-meta">
                            <span>3天前</span>
                            <span>·</span>
                            <span class="post-type type-poll">投票</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>大家平时更喜欢哪种社交方式？来投个票吧！</p>
                    
                    <div class="poll-options">
                        <div class="poll-option">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="poll" id="option1">
                                <label class="form-check-label" for="option1">
                                    线下聚会，面对面交流
                                </label>
                            </div>
                        </div>
                        <div class="poll-option">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="poll" id="option2">
                                <label class="form-check-label" for="option2">
                                    线上聊天，灵活方便
                                </label>
                            </div>
                        </div>
                        <div class="poll-option">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="poll" id="option3">
                                <label class="form-check-label" for="option3">
                                    兴趣社群，围绕共同话题
                                </label>
                            </div>
                        </div>
                        <div class="poll-option">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="poll" id="option4">
                                <label class="form-check-label" for="option4">
                                    活动参与，在实践中认识朋友
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="poll-info">
                        <span>已有 128 人参与投票 · 还剩 3 天结束</span>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 892</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 76</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn">
                        <i class="fas fa-thumbs-up"></i>
                        <span>点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn bookmarked">
                        <i class="fas fa-bookmark"></i>
                        <span>已收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 商品动态（单张图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">王芳</a>
                        <div class="post-meta">
                            <span>4天前</span>
                            <span>·</span>
                            <span class="post-type type-product">商品</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>给大家推荐一款我最近在用的便携相机，画质非常好，适合旅行携带，性价比很高！</p>
                    
                    <div class="product-info">
                        <div class="product-image">
                            <img src="https://picsum.photos/400/400?random=15" alt="便携相机产品图片">
                        </div>
                        <div class="product-details">
                            <div class="product-title">高清便携数码相机</div>
                            <div class="product-price">¥1,299.00</div>
                            <div>4.8分 (126条评价)</div>
                            <div class="product-actions">
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-shopping-cart"></i> 加入购物车
                                </button>
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-link"></i> 查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 632</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 87</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn">
                        <i class="fas fa-thumbs-up"></i>
                        <span>点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 星座动态（无图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">赵阳</a>
                        <div class="post-meta">
                            <span>今天 08:00</span>
                            <span>·</span>
                            <span class="post-type type-horoscope">星座</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>今日星座运势：金牛座</p>
                    
                    <div class="horoscope-details">
                        <div class="horoscope-date">2023年5月15日 运势</div>
                        <p>今天你的人际关系会有不错的发展，适合参加社交活动。工作上会有新的机会出现，但需要你主动把握。财运平稳，投资需谨慎。</p>
                        
                        <div class="horoscope-mood">
                            <div class="mood-item">
                                <div class="mood-label">爱情</div>
                                <div class="mood-value">★★★★☆</div>
                            </div>
                            <div class="mood-item">
                                <div class="mood-label">事业</div>
                                <div class="mood-value">★★★☆☆</div>
                            </div>
                            <div class="mood-item">
                                <div class="mood-label">财运</div>
                                <div class="mood-value">★★★☆☆</div>
                            </div>
                            <div class="mood-item">
                                <div class="mood-label">健康</div>
                                <div class="mood-value">★★★★☆</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 1243</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 156</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-thumbs-up"></i>
                        <span>已点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 深色风格动态列表 -->
        <div class="feed-section style-dark">
            <h3 class="style-label">
                <i class="fas fa-moon"></i> 深色风格 - 多种类型动态
            </h3>
            
            <!-- 约会动态（单张图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">陈静</a>
                        <div class="post-meta">
                            <span>1天前</span>
                            <span>·</span>
                            <span class="post-type type-date">约会</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>周末想找个伴一起去看新上映的科幻电影，有感兴趣的朋友吗？地点在市中心影院，时间可以商量。</p>
                </div>
                
                <div class="post-images single-image">
                    <div class="post-image">
                        <img src="https://picsum.photos/800/450?random=20" alt="电影院和电影海报">
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 421</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 53</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-hand-holding-heart"></i>
                        <span>已报名 8</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn">
                        <i class="fas fa-thumbs-up"></i>
                        <span>点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 专题动态（多张图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">孙强</a>
                        <div class="post-meta">
                            <span>2天前</span>
                            <span>·</span>
                            <span class="post-type type-topic">专题</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>整理了一组关于城市建筑摄影的专题作品，记录了这座城市的发展与变迁，欢迎大家欣赏和交流。</p>
                </div>
                
                <div class="post-images">
                    <div class="post-image">
                        <img src="https://picsum.photos/400/400?random=25" alt="城市建筑摄影作品1">
                    </div>
                    <div class="post-image">
                        <img src="https://picsum.photos/400/400?random=26" alt="城市建筑摄影作品2">
                    </div>
                    <div class="post-image">
                        <img src="https://picsum.photos/400/400?random=27" alt="城市建筑摄影作品3">
                    </div>
                    <div class="post-image">
                        <img src="https://picsum.photos/400/400?random=28" alt="城市建筑摄影作品4">
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 786</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 94</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-thumbs-up"></i>
                        <span>已点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn bookmarked">
                        <i class="fas fa-bookmark"></i>
                        <span>已收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 服务动态（无图片） -->
            <div class="post-card">
                <div class="post-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <a href="#" class="author-name">林小美</a>
                        <div class="post-meta">
                            <span>5天前</span>
                            <span>·</span>
                            <span class="post-type type-service">服务</span>
                        </div>
                        <a href="#" class="date-author-btn">
                            <i class="fas fa-calendar-alt"></i> 约会作者
                        </a>
                    </div>
                    <div class="post-menu">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                
                <div class="post-content">
                    <p>本人提供专业的摄影后期修图服务，擅长人像美化、风景调色，价格公道，有需要的朋友可以联系我。</p>
                    
                    <div class="service-info">
                        <div class="service-details">
                            <div class="service-title">专业摄影后期修图服务</div>
                            <div class="service-provider">服务提供者：林小美（5年修图经验）</div>
                            <div>价格：¥30-100/张（根据复杂度）</div>
                            <div class="service-actions">
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-comment-alt"></i> 咨询详情
                                </button>
                                <button class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-star"></i> 查看案例
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="post-stats">
                    <div class="stat-item">
                        <i class="fas fa-eye"></i>
                        <span>浏览 356</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-heart"></i>
                        <span>意向 42</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-check-circle"></i>
                        <span>已服务 18</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn like-btn">
                        <i class="fas fa-thumbs-up"></i>
                        <span>点赞</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="fas fa-comment"></i>
                        <span>评论</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="fas fa-share"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn bookmark-btn">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    if (this.classList.contains('liked')) {
                        this.innerHTML = '<i class="fas fa-thumbs-up"></i><span>已点赞</span>';
                    } else {
                        this.innerHTML = '<i class="fas fa-thumbs-up"></i><span>点赞</span>';
                    }
                });
            });
            
            // 收藏功能
            const bookmarkButtons = document.querySelectorAll('.bookmark-btn');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('bookmarked');
                    if (this.classList.contains('bookmarked')) {
                        this.innerHTML = '<i class="fas fa-bookmark"></i><span>已收藏</span>';
                    } else {
                        this.innerHTML = '<i class="fas fa-bookmark"></i><span>收藏</span>';
                    }
                });
            });
            
            // 评论功能
            const commentButtons = document.querySelectorAll('.comment-btn');
            commentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    alert('打开评论区');
                });
            });
            
            // 分享功能
            const shareButtons = document.querySelectorAll('.share-btn');
            shareButtons.forEach(button => {
                button.addEventListener('click', function() {
                    alert('打开分享选项');
                });
            });
            
            // 约会作者功能
            const dateButtons = document.querySelectorAll('.date-author-btn');
            dateButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const authorName = this.closest('.author-info').querySelector('.author-name').textContent;
                    alert(`发送约会请求给 ${authorName}`);
                });
            });
            
            // 投票选项功能
            const pollOptions = document.querySelectorAll('.poll-option');
            pollOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除其他选项的选中状态
                    pollOptions.forEach(opt => opt.classList.remove('selected'));
                    // 添加当前选项的选中状态
                    this.classList.add('selected');
                    // 选中对应的单选按钮
                    const radio = this.querySelector('input[type="radio"]');
                    radio.checked = true;
                });
            });
            
            // 更多选项
            const postMenus = document.querySelectorAll('.post-menu');
            postMenus.forEach(menu => {
                menu.addEventListener('click', function() {
                    alert('显示更多操作选项');
                });
            });
        });
    </script>
</body>
</html>
    
